<template>
	<view class="login">
		<view class="login-reset">
			<text @click="openPopup">重置密码</text>
			<image @click="openPopup" class="reset-icon" src="../../static/img/login-reset.png" mode=""></image>
		</view>
		<view class="login-tab">
			<view class="tab-menu">
				<!-- 		<view :class="['item',  active===1?'active':'']" @click="active=1">
					<text>手机登录</text>
					<view :class="['line', active===1?'line-active':'']"></view>
				</view> -->
				<view :class="['item',  active===2?'active':'']" @click="active=2">
					<text>账号密码登录</text>
					<view :class="['line', active===2?'line-active':'']"></view>
				</view>
			</view>
			<view class="tab-content">
				<view class="content" v-show="active===1">
					<uni-forms ref="phoneForm" :modelValue="phoneData" :rules="phoneRules">
						<uni-forms-item label="" name="phone">
							<input type="number" maxlength="11" placeholder="手机号" v-model="phoneData.phone" />
						</uni-forms-item>
						<view class="content-line"></view>
						<uni-forms-item label="" name="code">
							<view class="captcha">
								<input v-model="phoneData.code" type="number" maxlength="6" placeholder="验证码" />
								<button class="code" :disabled="captchaBool"
									@click="sendCaptcha">{{captchaText}}</button>
							</view>
						</uni-forms-item>
					</uni-forms>
				</view>
				<view class="content" v-show="active===2">
					<uni-forms ref="pwdForm" :modelValue="pwdData" :rules="pwdRules">
						<uni-forms-item label="" name="phone">
							<input type="number" maxlength="11" placeholder="手机号" v-model="pwdData.phone" />
						</uni-forms-item>
						<view class="content-line"></view>
						<uni-forms-item label="" name="password">
							<input v-model="pwdData.password" type="password" placeholder="密码" />
						</uni-forms-item>
					</uni-forms>
				</view>
			</view>
		</view>
		<view class="login-rule">
			<view class="rule-check">
				<checkbox-group @change="authCheng">
					<label>
						<checkbox color="#FFBD47" value="test" :checked="authCheck" />同意SKY数字藏品,
					</label>
				</checkbox-group>
			</view>
			<view class="rule-text" @click="goAppRulePage">
				<text>《隐私政策》</text>,<text>《使用条款》</text>
			</view>
			<view class="login-register" @click="goAppRegisterPage">用户注册</view>
		</view>
		<view class="login-submit">
			<text>提交</text>
			<view class="right" @click="loginSubmit"></view>
		</view>

		<uni-popup ref="popup" type="bottom">
			<view class="popup-reset">
				<view class="reset-title">
					重置密码
				</view>
				<uni-forms ref="resetForm" :modelValue="resetData" :rules="pwdRules">
					<uni-forms-item label="手机号" name="phone">
						<input type="number" maxlength="11" placeholder="手机号" v-model="resetData.phone" />
					</uni-forms-item>
					<view class="content-line"></view>
					<uni-forms-item label="新密码" name="password">
						<input type="password" placeholder="新密码" v-model="resetData.password" />
					</uni-forms-item>
					<view class="content-line"></view>
					<uni-forms-item label="验证码" name="code" class="captcha-box">
						<view class="captcha">
							<input v-model="resetData.code" type="number" maxlength="6" placeholder="验证码" />
							<button class="code" :disabled="resetCaptchaBool"
								@click="sendResetCaptcha">{{resetCaptchaText}}</button>
						</view>
					</uni-forms-item>
				</uni-forms>
				<button type="default" :loading="resetLoading" class="reset-submit"
					@click="resetSubmit">{{ resetLoading ? '' :'重置密码'}}</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		login,
		passwordLogin,
		resetPassword,
		mobilePhoneLogin,
		getAuthenticationCode,
	} from '../../request/login-api.js'

	export default {
		components: {},
		data() {
			return {
				// 同意隐私政策
				authCheck: false,
				// 登录方式选项
				active: 2,
				// 验证码按钮状态
				captchaBool: true,
				// 验证码时间
				captchaTime: 60,
				// 验证码定时器
				captchaTimer: null,
				// 验证码提示文字
				captchaText: "发送验证码",
				// 手机登录
				phoneData: {
					code: '',
					phone: ''
				},
				// 密码登录
				pwdData: {
					password: '',
					phone: '',
				},
				// 手机登录验证
				phoneRules: {
					code: {
						rules: [{
							required: true,
							errorMessage: '请输入验证码',
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						}]
					}
				},
				// 密码登录验证
				pwdRules: {
					code: {
						rules: [{
							required: true,
							errorMessage: '请输入验证码',
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码',
						}]
					},
				},

				// 重置密码
				resetData: {
					code: '',
					password: '',
					phone: '',
				},
				// 重置按钮 loading
				resetLoading: false,
				// 验证码按钮状态
				resetCaptchaBool: true,
				// 验证码时间
				resetCaptchaTime: 60,
				// 验证码定时器
				resetCaptchaTimer: null,
				// 验证码提示文字
				resetCaptchaText: "发送验证码",

			}
		},
		watch: {
			phoneData: {
				deep: true,
				handler(n) {
					if (n.phone.length === 11) {
						this.captchaBool = false
					} else {
						this.captchaBool = true
					}
				}
			},
			resetData: {
				deep: true,
				handler(n) {
					if (n.phone.length === 11) {
						this.resetCaptchaBool = false
					} else {
						this.resetCaptchaBool = true
					}
				}
			}
		},
		methods: {
			// 跳转隐私政策
			goAppRulePage() {
				uni.navigateTo({
					url: "../rule/rule",
					animationType: 'pop-in',
					animationDuration: 200
				})
			},

			// 跳转注册
			goAppRegisterPage() {
				uni.navigateTo({
					url: "../register/register",
					animationType: 'pop-in',
					animationDuration: 200
				})
			},

			// 跳转首页
			goAppHomePage() {
				uni.reLaunch({
					url: `../home/home?time=${new Date().getTime()}`,
					animationType: 'pop-in',
					animationDuration: 200
				})
			},

			// 隐私政策 变化
			authCheng(e) {
				this.authCheck = e.detail.value.length ? true : false
			},

			// 打开 重置弹框
			openPopup() {
				this.$refs.popup.open('center')
			},

			// 关闭 重置弹框
			closePopup() {
				this.$refs.popup.close()
			},

			// 表单提交
			loginSubmit() {
				if (this.active === 1) {
					this.$refs.phoneForm.validate().then(res => {
						this.captchaSubmit(res)
					}).catch(err => {
						console.log('表单错误信息：', err);
					})
				} else {
					this.$refs.pwdForm.validate().then(res => {
						this.pwdSubmit(res)
					}).catch(err => {
						console.log('表单错误信息：', err);
					})

				}
			},

			// 发送验证码
			async sendCaptcha() {
				// 判断
				if (this.captchaTime !== 60) return false
				this.captchaTime -= 1
				this.captchaTimer = setInterval(() => {
					this.captchaTime -= 1
					this.captchaText = this.captchaTime + ' s'
					if (this.captchaTime === 0) {
						clearInterval(this.captchaTimer)
						this.captchaTime = 60
						this.captchaText = '发送验证码'
					}
				}, 1000)

				// 验证码参数
				let params = {
					phone: this.phoneData.phone
				}

				// 发送验证码
				try {
					let {
						code,
						message
					} = await getAuthenticationCode(params)

					if (code === 200) {
						// this.phoneData.code = 992736
						uni.showToast({
							title: '短信发送成功',
							icon: 'success'
						})
					} else {
						uni.showToast({
							title: message,
							icon: 'error'
						})
						this.captchaTime = 60
					}
				} catch {
					uni.showToast({
						title: '服务繁忙',
						icon: 'error'
					})
				}
			},

			// 发送重置验证码
			async sendResetCaptcha() {
				// 判断
				if (this.resetCaptchaTime !== 60) return false
				this.resetCaptchaTime -= 1
				this.resetCaptchaTimer = setInterval(() => {
					this.resetCaptchaTime -= 1
					this.resetCaptchaText = this.resetCaptchaTime + ' s'
					if (this.resetCaptchaTime === 0) {
						clearInterval(this.resetCaptchaTimer)
						this.resetCaptchaTime = 60
						this.resetCaptchaText = '发送验证码'
					}
				}, 1000)

				// 验证码参数
				let params = {
					phone: this.resetData.phone
				}

				// 发送验证码
				try {
					let {
						code,
						message
					} = await getAuthenticationCode(params)

					if (code === 200) {
						// this.resetData.code = 992736
						uni.showToast({
							title: '短信发送成功',
							icon: 'success'
						})
					} else {
						uni.showToast({
							title: message,
							icon: 'error'
						})
						this.resetCaptchaTime = 60
					}
				} catch {
					uni.showToast({
						title: '服务繁忙',
						icon: 'error'
					})
				}
			},

			// 短信登录
			async captchaSubmit(values) {
				if (!this.authCheck) {
					uni.showToast({
						title: '请阅读并勾选用户协议',
						icon: 'none'
					})
					return false
				}
				uni.showLoading({
					title: '登录中...'
				})
				try {
					let {
						code,
						data,
						message
					} = await mobilePhoneLogin(values)
					if (code === 200) {
						uni.showToast({
							title: '登录成功',
							icon: 'success'
						})
						data.login = true
						uni.setStorageSync('user', JSON.stringify(data))
						this.goAppHomePage()
					} else {
						uni.showToast({
							title: message,
							icon: 'none'
						})
					}
					uni.hideLoading()
				} catch {
					uni.hideLoading()
					uni.showToast({
						title: '服务繁忙',
						icon: 'none'
					})
				}
			},

			// 密码登录
			async pwdSubmit(values) {
				if (!this.authCheck) {
					let self = this
					uni.showModal({
						title: '用户协议',
						content: '请阅读并同意用户服务及隐私协议',
						cancelText: '阅读',
						confirmText: '同意',
						success: function(res) {
							if (res.confirm) {
								self.authCheck = true
								if (values.password.indexOf('/') !== -1 || values.password.indexOf('?') !== -1) {
									uni.showToast({
										title: '密码不能带有 / 或 ？号， 请重置密码',
										icon: 'none'
									})
								} else {
									self.login(values)
								}
							} else if (res.cancel) {
								self.goAppRulePage()
								return false
							}
						}
					})
				} else {
					if (values.password.indexOf('/') !== -1 || values.password.indexOf('?') !== -1) {
						uni.showToast({
							title: '密码不能带有 / 或 ？号， 请重置密码',
							icon: 'none'
						})
					} else {
						this.login(values)
					}
				}
			},

			// 登录请求
			async login(values) {
				uni.showLoading({
					title: '登录中...'
				})
				try {
					let {
						code,
						data,
						message
					} = await passwordLogin(values.phone, values.password)
					if (code === 200) {
						uni.hideLoading()
						uni.showToast({
							title: '登录成功',
							icon: 'success'
						})
						data.login = true
						uni.setStorageSync('user', JSON.stringify(data))
						this.goAppHomePage()
					} else {
						uni.hideLoading()
						uni.showToast({
							title: message,
							icon: 'none'
						})
					}
				} catch (err) {
					console.log(err)
					uni.hideLoading()
					uni.showToast({
						title: '服务繁忙',
						icon: 'none'
					})
				}
			},

			// 重置密码
			async resetSubmit() {
				this.$refs.resetForm.validate().then(async res => {
					// console.log('表单数据信息：', res);
					this.resetLoading = true
					try {
						let {
							code,
							message
						} = await resetPassword(res)
						if (code === 200) {
							uni.showToast({
								title: '密码重置成功',
								icon: 'success'
							})
							clearInterval(this.resetCaptchaTimer)
							this.resetCaptchaTime = 60
							this.resetCaptchaText = "发送验证码"
							// 收动重置
							this.resetData = {
								code: '',
								password: '',
								phone: '',
							}
							this.closePopup()
						} else {
							uni.showToast({
								title: message,
								icon: 'none'
							})
						}
						this.resetLoading = false
					} catch (err) {
						console.log(err)
						this.resetLoading = false
						uni.showToast({
							title: '服务繁忙',
							icon: 'none'
						})
					}
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	.login {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		padding: 20rpx 20rpx 0 20rpx;
		background: $login-background-url no-repeat;
		background-size: 100% 100%;
		background-position: 0 -80rpx;
		display: flex;
		flex-direction: column;
	}

	.login-reset {
		height: 92rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #77787E;
		position: relative;
		padding-right: 100rpx;

		.reset-icon {
			width: 200rpx;
			height: 200rpx;
			position: absolute;
			right: -60rpx;
			top: -40rpx;
		}
	}

	.login-tab {
		width: 100%;
		margin-top: 100rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.tab-menu {
			width: 100%;
			height: 76rpx;
			padding: 0 40rpx;
			display: flex;
			justify-content: center;

			.item {
				width: 240rpx;
				height: 76rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #504d50;
				line-height: 44rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;

				.line {
					width: 56rpx;
					height: 8rpx;
					border-radius: 4rpx;
					box-shadow: -4rpx -4rpx 12rpx 0rpx rgba(70, 75, 86, 0.23), 4rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.83);
				}
			}

			.active {
				color: #FFBD47;

				.line-active {
					background-color: #FFBD47;
				}
			}
		}

		.tab-content {
			width: 720rpx;
			height: 220rpx;
			margin-top: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: $login-tabback-url no-repeat;
			background-size: 100% 100%;
			background-position: 0 0rpx;

			.content {
				width: 580rpx;

				.content-line {
					width: 100%;
					height: 2rpx;
					margin: 4rpx 0 10rpx 0;
					border-radius: 5rpx;
					background-color: #808080;
				}

				.captcha {
					width: calc(100% - 120);
					display: flex;

					.code {
						background: none;
						width: 220rpx;
						height: 56rpx;
						line-height: 48rpx;
						text-align: center;
						font-size: 28rpx;
						font-family: SourceHanSansCN-Regular, SourceHanSansCN;
						font-weight: 400;
						color: #FFBD47;
						border: solid 2rpx #FFBD47;
						border-radius: 30rpx;
					}

					.code[disabled] {
						color: #c6c6c6;
						border: solid 2rpx #f7f7f7;
					}
				}
			}
		}
	}

	.login-rule {
		flex: 1;
		width: 688rpx;
		height: 200rpx;
		margin: 0 auto;
		text-align: center;
		font-size: 28rpx;
		color: #676767;
		padding: 30rpx 0 0 0;
		background: $login-ruleback-url no-repeat;
		background-size: 100% auto;
		background-position: 0 0rpx;
		display: flex;
		justify-content: center;
		position: relative;

		.rule-check {
			height: 40rpx;

			/deep/ .uni-checkbox-input {
				border-radius: 50%;
				background-color: rgba(0, 0, 0, 0);
				border-color: #FFBD47;
				transform: scale(0.8);
			}

			/deep/ .uni-checkbox-input-checked {
				border-color: #FFBD47 !important;
			}

			/deep/ .uni-checkbox-input:hover {
				border-color: #FFBD47 !important;
			}
		}

		.rule-text {
			height: 40rpx;

			text {
				color: #0091FF;
			}
		}

		.login-register {
			position: absolute;
			left: 50%;
			top: 90rpx;
			transform: translateX(-50%);
			font-size: 28rpx;
			font-family: SourceHanSansCN-Regular, SourceHanSansCN;
			font-weight: 400;
			color: #0091FF;
			text-decoration: underline;
		}
	}

	.login-submit {
		width: 100%;
		height: 200rpx;
		position: relative;
		color: #F0AD4E;
		text-align: center;
		background: $login-subbakc-url no-repeat;
		background-size: 100% 100%;
		background-position: 0 0rpx;
		padding: 20rpx 0 0 0;

		text {
			display: block;
			margin: 20rpx 0;
		}

		.right {
			width: 280rpx;
			height: 280rpx;
			border-radius: 50%;
			overflow: hidden;
			background: $login-right-url no-repeat;
			background-size: 100% 100%;
			background-position: center center;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateX(-50%) translateY(-40%);
		}
	}

	@media screen and (max-height: 500rpx) {
		.login-submit {
			display: none;
		}
	}

	.popup-reset {
		width: 700rpx;
		height: 528rpx;
		padding: 40rpx;
		background: $login-resetbakc-url no-repeat;
		background-size: 100% 100%;
		background-position: 0 0;

		.reset-title {
			text-align: center;
			font-size: 16px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #BFCBCD;
			line-height: 22px;
			margin-bottom: 20rpx;
		}

		.content-line {
			width: 100%;
			height: 2rpx;
			margin: 4rpx 0 10rpx 0;
			border-radius: 5rpx;
			background-color: #808080;
		}

		/deep/ .uni-forms-item__label .label-text {
			font-size: 32rpx;
			font-family: SourceHanSansCN-Bold, SourceHanSansCN;
			font-weight: bold;
			color: #BFCBCD;
			margin-bottom: 14rpx;
		}

		.captcha-box {
			margin-top: 20rpx;

			.captcha {
				width: calc(100% - 120);
				display: flex;

				.code {
					background: none;
					width: 220rpx;
					height: 56rpx;
					line-height: 48rpx;
					text-align: center;
					font-size: 28rpx;
					font-family: SourceHanSansCN-Regular, SourceHanSansCN;
					font-weight: 400;
					color: #FFBD47;
					border: solid 2rpx #FFBD47;
					border-radius: 30rpx;
					padding-bottom: -10px;
				}

				.code[disabled] {
					color: #c6c6c6;
					border: solid 2rpx #f7f7f7;
				}
			}
		}

		.reset-submit {
			width: 606rpx;
			height: 88rpx;
			line-height: 80rpx;
			background: #121212;
			box-shadow: -20rpx -20rpx 40rpx 0rpx rgba(39, 39, 39, 0.54), 20rpx 20rpx 40rpx 0px rgba(0, 0, 0, 0.83);
			border-radius: 44rpx;
			border: 2rpx solid #FFBD47;
			margin-top: 30rpx;
			font-size: 32rpx;
			font-family: SourceHanSansCN-Regular, SourceHanSansCN;
			font-weight: 400;
			color: #FFBD47;
		}
	}

	/deep/ .uni-forms-item {
		color: #E8E8E8;

		.uni-forms-item__box {
			display: flex;
			flex-direction: column;
			justify-content: center;

			.uni-forms-item__inner {
				padding: 0;
				align-items: center;
			}

			.uni-error-message {
				bottom: -10rpx;
			}


			.uni-forms-item__content {
				height: 28px;
				min-height: 28px;

				input {
					text-indent: 4rpx;
				}
			}
		}
	}
</style>
